iT邦幫忙

2019 iT 邦幫忙鐵人賽

1
自我挑戰組

程式設計師大冒險系列 第 55

[55/150]網頁版計算機製作(下篇)

  • 分享至 

  • xImage
  •  

初步功能完成,但仍有BUG要處理。程式碼部分不夠簡潔,主要是不會使用DOM,目前只會選取ID,所以有大量重複性程式碼。為了改善程式碼,決定先學好DOM。

作品:網頁版計算機

【大綱】

  • 時間分配
  • JavaScript
  • 檢討與修正
  • 總結

【時間分配】

項目 時間
Excel vba 0 hr 48 min
做計算機 4 hr 09 min
鐵人發文 0 hr 51 min

【JavaScript】

參考:陣列switch
重複性程式碼多,有待修改。
為避免閱讀困難,部分重複程式只貼一次作為代表。

var numar = [""];
var sum =0;
function myFunction(num) {
	if(numar[0].length<9){
		numar[0]=numar[0]+num.toString();
	   document.getElementById("demo").innerHTML =numar[0];
	}	
	numar.push(num)*/
}

螢幕數字呈現

/* ope 待縮減 控制運算*/
var ifop = 0;
function oper(op){
	opersum(ifop);
	document.getElementById("add").style.visibility =" hidden";
	/*...這邊重複四次,分別為加減乘除*/
	switch(op){			
		case 1:
			ifop=1;			
			document.getElementById("add").style.visibility =" visible";
			break;
		/*...這邊重複四次,分別為加減乘除*/
		default:
		numar[0]="";
		sum=0;
			document.getElementById("de").innerHTML =numar[0];
			}
	document.getElementById("de").innerHTML =sum;
	numar[0]="";
	document.getElementById("demo").innerHTML =numar[0];	
}

按下加減乘除紐,會發生的事情

function opersum(ope){
	switch(ope){		
		case 1:
			sum+=Number(numar[0]);			
			break;
		/*...這邊重複四次,分別為加減乘除*/
		default:
			ifop=0;
	}
	ifop=0;
}

進行運算

【檢討與修正】

總共有四處待修改
1.儲存區數字第一次無法正常儲存
2.螢幕圖示超出位置
3.忘記做"0"的按鈕
4.沒有做等於功能

忘記在在本機檔製作,不小心點到備份檔。
只好用備份檔取代本機檔,再推送上去。
不知道對歷程紀錄影響大不大。

【總結】

建立使用command line習慣,只會用預設值開檔案,還不會指定軟體開啟。
改名子感覺從命令提示字元快很多,用介面改檔案名,感覺會頓一下進行讀取。

看到Github漸漸染上綠色,還滿開心的。
剩下不到一百天,可以在染色13條。
感謝撥冗閱讀。


上一篇
[54/150]網頁版計算機製作(中篇)附半成品網址
下一篇
[56/150]繼續學習前端
系列文
程式設計師大冒險115
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言